<template>
  <van-list>
    <!-- <van-cell class="cellheader">共{{songs.length}}首</van-cell> -->
    <van-cell v-for="(item, index) in songs" :key="item.id" @click="handleItemClick(index)">
      <template #icon>
        <img v-if="icon" v-lazy="item.picUrl" />
        <!-- <span class="index" v-else>{{ index + 1 }}</span> -->
        <!-- <span class="index">{{ index + 1 }}</span> -->
      </template>
      <template #title>
        <span class="title">{{ item.name }}</span>
      </template>
      <template #label>
        <span>{{ item.author }}</span>
      </template>
      <template #right-icon>
        <span v-if="currentPlaySong">
          <van-icon
            v-if="audioPlayState && currentPlaySong.id == item.id"
            class-prefix="my-icon"
            name="play"
            size="19"
          />
          <van-icon
            v-if="!audioPlayState && currentPlaySong.id == item.id"
            class-prefix="my-icon"
            name="timeout"
            size="19"
          />
        </span>
        <span v-if="close"><van-icon name="cross" @click.stop="handleActionDel(index)" /></span>
        <span v-else><van-icon name="ellipsis" @click.stop="handleActionSheet(index)" /></span>
      </template>
    </van-cell>
  </van-list>
  <van-action-sheet v-model:show="actionSheetShow">
    <van-cell />
    <van-cell icon="like" title="取消喜欢" v-if="isFavorite" @click="handleDelFromFavorite" />
    <van-cell icon="like-o" title="添加至我喜欢" v-if="!isFavorite" @click="handleAddToFavorite" />
    <van-cell icon="add-o" title="添加到歌单" @click="handleAddToPlayList" />
    <van-cell icon="music-o" title="下一首播放" @click="handleAddNextPlay" />
    <van-cell icon="share-o" title="分享" @click="handleShare" />
    <van-cell icon="down" title="下载" @click="handleDownload" />
    <van-cell />
  </van-action-sheet>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Toast } from 'vant';
import { useMyStores } from '@/store';

const props = defineProps({
  songs: {
    type: Array,
    default: []
  },
  icon: {
    type: Boolean,
    default: false
  },
  close: {
    type: Boolean,
    default: false
  }
});

const { playerStore, audioPlayState, currentPlaySong, currentFavoriteList } = useMyStores();

// 点击播放
const handleItemClick = index => {
  playerStore.SET_CURRENT_PLAY_LIST(props.songs);
  playerStore.SET_FULL_PLAYER(true);
  playerStore.SET_MINI_PLAYER(false);
  playerStore.SET_CURRENT_PLAY_INDEX(index);
  playerStore.SET_AUDIO_PLAY_STATE(true);
};

// 动作面板
const actionSheetShow = ref(false);
const actionSheetIndex = ref(0);

const handleActionSheet = index => {
  actionSheetShow.value = true;
  actionSheetIndex.value = index;
};
// 删除
const handleActionDel = index => {
  // emit('handleActionDel', index);
};
// 点击操作对应的歌曲
const song = computed(() => props.songs[actionSheetIndex.value]);

// 是否收藏
const isFavorite = computed(() => {
  const index = currentFavoriteList.value.findIndex(item => item.id == song.value.id);
  if (index != -1) {
    return true;
  }
  return false;
});

// 收藏
const handleAddToFavorite = () => {
  playerStore.ADD_TO_FAVORITE_LIST(song.value);
  Toast('已添加至我喜欢');
};
// 取消收藏
const handleDelFromFavorite = () => {
  playerStore.DEL_CURRENT_FAVORITE_LIST(false, song.value);
  Toast('已从我喜欢中移除');
};

// 添加到歌单
const handleAddToPlayList = () => {
  playerStore.ADD_TO_MY_PLAY_LIST(song.value);
  Toast('已添加到歌单');
};
// 添加到下一首播放
const handleAddNextPlay = () => {
  playerStore.ADD_TO_NEXT_PLAY(song.value);
  Toast('已添加至下一首播放');
};
// 分享
const handleShare = () => {};
// 下载
const handleDownload = () => {};
</script>

<style lang="less" scoped>
img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
  margin-right: 10px;
}
.index {
  display: inline-block;
  width: 30px;
  text-align: center;
}
.title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.my-icon {
  margin-right: 10px;
  color: #ec4141;
}
.van-icon-ellipsis {
  transform: rotateZ(90deg);
}
.cellheader {
  padding-top: 0;
  padding-bottom: 0;
  :deep(.van-cell__value) {
    color: #999;
  }
  
}
</style>
